<template>
	<view>
		<view style="padding-bottom: 120rpx;">

			<uni-section title="维修信息" type="line">
				<view class="formContainer">
					<view class="text-line">
						<text class="text-name">车牌号:</text>
						<text class="text-value">{{formData.carPlateNo}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">送车时间:</text>
						<text class="text-value">{{formData.repairStartDate|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">维修厂:</text>
						<text class="text-value">{{formData.serviceName|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">维修项目:</text>
						<text class="text-value">{{formData.maintainRemark|filterNull}}</text>
					</view>
				</view>
			</uni-section>

			<uni-section title="完成维修" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="当前公里数" required>
							<u--input placeholder="请输入当前公里数" @input="checkMileage" type="digit" v-model="formData.useMileage">
							</u--input>
						</uni-forms-item>
						<uni-forms-item label="费用合计" required>
							<u--input placeholder="请输入合计费用" @input="check" type="digit" v-model="formData.totalPay">
							</u--input>
						</uni-forms-item>
						<uni-forms-item label="付款方" required>
							<uni-data-checkbox v-model="formData.payer" :localdata="payers" />
						</uni-forms-item>
						<view style="color: red;font-size: 24rpx;position: relative;top: -20rpx;"
							v-if="formData.payer==1">注：公司付款则维修完成后数据同步至车辆账单，其他付款方付款将不同步</view>
						<uni-forms-item label="取车时间" required>
							<uni-datetime-picker type="datetime" v-model="formData.repairEndDate" />
						</uni-forms-item>
						<uni-forms-item label="维修附件">
							<sr-upload maxCount="6" @uploadResult="uploadFile"></sr-upload>
						</uni-forms-item>
						<uni-forms-item label="备注" labelPosition="top">
							<view>
								<u--textarea v-model="formData.remark" placeholder="请输入50字以内的备注信息" count maxlength="50">
								</u--textarea>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-section>
		</view>
		<button type="info" class="sub-btn" @click="commitCustomer">提交</button>

	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue'
	import {
		updateRepairMaintain
	} from '@/api/car-api.js'
	var moment = require('@/utils/moment.js');
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				payers: [{
						value: 1,
						text: '公司'
					},
					{
						value: 2,
						text: '客户'
					},
					{
						value: 3,
						text: '其他'
					}
				],

				formData: {
					payer: 1,
					remark: '',
					repairEndDate : '',
					totalPay : '',
					imgList : [],
					useMileage:''

				}
			}
		},
		onLoad(option) {
			this.formData = JSON.parse(decodeURIComponent(option.item))||{};
			this.formData.payer = 1;
			this.formData.remark = '';
			this.formData.repairEndDate= '';
			this.formData.totalPay = '';
			this.formData.imgList = [];
		},
		methods: {
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
			    this.$nextTick(()=>{
					this.formData.totalPay = e;
				})
			},
			checkMileage(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
			    this.$nextTick(()=>{
					this.formData.useMileage = e;
				})
			},
			// 上传维修附件
			uploadFile(data) {
				this.formData.imgList = data
			},
			/** 提交按钮 */
			commitCustomer() {
				if(uni.$u.test.isEmpty(this.formData.repairEndDate)) {
					uni.$u.toast('请选择取车日期');
					return
				}else if(uni.$u.test.isEmpty(this.formData.totalPay)){
					uni.$u.toast('请输入费用合计');
					return
				}else {
					this.formData.repairEndDate=moment(this.formData.repairEndDate).format('YYYY-MM-DD HH:mm:ss');
					updateRepairMaintain(this.formData).then(response => {
						uni.$emit('refreshRepair');
						uni.navigateBack({
						});
					});
				}
				
				
			},
			// 日期格式化
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
				let date;
				if (typeof time === 'object') {
					date = time;
				} else {
					if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === 'string') {
						time = time
							.replace(new RegExp(/-/gm), '/')
							.replace('T', ' ')
							.replace(new RegExp(/\.[\d]{3}/gm), '');
					}
					if (typeof time === 'number' && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay()
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === 'a') {
						return ['日', '一', '二', '三', '四', '五', '六'][value];
					}
					if (result.length > 0 && value < 10) {
						value = '0' + value;
					}
					return value || 0;
				});
				return time_str;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>
